<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import './assets/styles.css'
import DevicePixelRatio from '@/utils/rem'
import { useUserStore } from '@/stores/useUserStore'

const zoomRatio = { value: 100 }
const screenWidth = window.screen.width * window.devicePixelRatio

const userStore = useUserStore()

onMounted(() => {
  if (screenWidth <= 1920) {
    detectZoom()
    window.addEventListener('resize', detectZoom)
    new DevicePixelRatio().init()
  } else {
    setDocumentStyle()
  }
  userStore.initializeStore()
})

onBeforeUnmount(() => {
  if (screenWidth <= 1920) window.removeEventListener('resize', detectZoom)
})

function detectZoom() {
  let ratio = 0
  const screen = window.screen
  const ua = navigator.userAgent.toLowerCase()

  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth
  }

  zoomRatio.value = ratio * 100
  setDocumentStyle()
}

function setDocumentStyle() {
  document.documentElement.style.setProperty(
    '--onresize_height',
    zoomRatio.value + 'vh'
  )
  document.documentElement.style.setProperty(
    '--onresize_width',
    zoomRatio.value + 'vw'
  )

  if (navigator.userAgent.indexOf('Firefox') >= 0) {
    document.documentElement.style.setProperty('width', zoomRatio.value + 'vw')
  }
}
</script>

<template>
  <router-view></router-view>
</template>

<style scoped></style>
